<!doctype html>
<html>
<head>
<meta charset="utf-8">
	<title>Google Play's minimal tabs with CSS3 & jQuery - demo</title>
	
                <script type="text/javascript">
            
            function llamarPagina(pagina){

	$.post(pagina, function(data){
		$("#tab1").html(data);
	});
}  
    function llamarPagina1(pagina){

	$.post(pagina, function(data){
		$("#tab2").html(data);
	});
}  
      
        </script>
        <style>
            

	/* ------------------------------------------------- */

	#tabs {
	  overflow: hidden;
	  width: 100%;
	  margin: 0;
	  padding: 0;
	  list-style: none;
	}

	#tabs li {
	  float: left;
	  margin: 0 -15px 0 0;
	}

	#tabs a {
	  float: left;
	  position: relative;
	  padding: 0 40px;
	  height: 0;
	  line-height: 30px;
	  text-transform: uppercase;
	  text-decoration: none;
	  color: #fff;      
	  border-right: 30px solid transparent;
	  border-bottom: 30px solid #3D3D3D;
	  border-bottom-color: #777\9;
	  opacity: .3;
	  filter: alpha(opacity=30);      
	}

	#tabs a:hover,
	#tabs a:focus {
	  border-bottom-color: #2ac7e1;
	  opacity: 1;
	  filter: alpha(opacity=100);
	}

	#tabs a:focus {
	  outline: 0;
	}

	#tabs #current {
	  z-index: 3;
	  border-bottom-color: #3d3d3d;
	  opacity: 1;
	  filter: alpha(opacity=100);      
	}

	/* ----------- */
	#content {
	    background: #fff;
	    border-top: 2px solid #3d3d3d;
	    padding: 2em;
	    /*height: 220px;*/
	}

	#content h2,
	  #content h3,
	  #content p {
	    margin: 0 0 15px 0;
	}  

	/* Demo page only */
	#about {
	    color: #999;
	    text-align: center;
	    font: 0.9em Arial, Helvetica;
	}

	#about a {
	    color: #777;
	}   
	</style>	
</head>
<body>
  <ul id="tabs">
      <li><a href="#" name="#tab1" onClick="llamarPagina('impresora.php')">REGISTRAR IMPRESORA</a></li>
      <li><a href="#" name="#tab2" onClick="llamarPagina1('DiscoDuro.php')">CONSULTAR IMPRESORA</a></li>
      </ul>

  <div id="content">
      <div id="tab1">
          
      </div>
      <div id="tab2">
          
      </div>

  </div>

  <script src="js/jquery-1.7.2.min.js"></script>

  <script>
    function resetTabs(){
        $("#content > div").hide(); //Hide all content
        $("#tabs a").attr("id",""); //Reset id's      
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf("#")); // For localhost/tabs.html#tab2, myUrlTab = #tab2     
    var myUrlTabName = myUrlTab.substring(0,4); // For the above example, myUrlTabName = #tab

    (function(){
        $("#content > div").hide(); // Initially hide all content
        $("#tabs li:first a").attr("id","current"); // Activate first tab
        $("#content > div:first").fadeIn(); // Show first tab content
        
        $("#tabs a").on("click",function(e) {
            e.preventDefault();
            if ($(this).attr("id") == "current"){ //detection for current tab
             return       
            }
            else{             
            resetTabs();
            $(this).attr("id","current"); // Activate this
            $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });

        for (i = 1; i <= $("#tabs li").length; i++) {
          if (myUrlTab == myUrlTabName + i) {
              resetTabs();
              $("a[name='"+myUrlTab+"']").attr("id","current"); // Activate url tab
              $(myUrlTab).fadeIn(); // Show url tab content        
          }
        }
    })()
  </script>


</body>
</html>
